<template>
    <div class="space-between pd10">
        <div>
            <div class="mr10 mb4">
                <span class="mr6">开始时间</span>
                <el-date-picker
                        v-model="value1"
                        type="datetime"
                        placeholder="请选择开始时间"
                />
            </div>
            <div class="">
                <span class="mr6">结束时间</span>
                <el-date-picker
                        v-model="value2"
                        type="datetime"
                        placeholder="请选择结束时间"
                />
            </div>
        </div>

        <div class="mr10">
            <el-button type="primary">
                <SvgIcon name="Setting" class="mr8"/>
                查询
            </el-button>
            <el-button color="#696fd1" @click="change">
                <SvgIcon name="Setting" class="mr8"/>
                详情
            </el-button>
        </div>

    </div>

    <div>
        <el-table :data="tableData" stripe style="width: 100%;" :header-cell-style="tableHeaderColor"
                  size="small" >
            <el-table-column prop="date" label="时间" width="" align="center" />
            <el-table-column prop="name" label="产品编号" width="" align="center"/>
            <el-table-column prop="address" label="判定结果" align="center" v-if="props.hidden"/>
        </el-table>
    </div>

</template>

<script setup>
    import { ref } from 'vue'
    const props = defineProps({
        hidden: {
            type: Boolean,
            default: true
        },

    });
    const value1 = ref('')
    const value2 = ref('')
    //表头css
    function tableHeaderColor ({row, column, rowIndex, columnIndex}) {
        return {
            color:'black',
        }
    }

    const tableData = [
        {
            date: '2016-05-03',
            name: 'Tom',
            address: '合格',
        },
        {
            date: '2016-05-02',
            name: 'Tom',
            address: '合格',
        },
        {
            date: '2016-05-04',
            name: 'Tom',
            address: '合格',
        },
        {
            date: '2016-05-01',
            name: 'Tom',
            address: '合格',
        },
    ]
    const emits = defineEmits(['detail']);
    function change() {
        emits('detail')
    }
</script>

<style scoped>

</style>